<template>
    <div class="modal fade" id="remindExamine" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" >
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">提醒到访审核</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">客户姓名</label>
                        <div class="col-sm-9">
                            {{this.remindExamineVal.name}}
                        </div>
                    </div>
                   <div class="form-group">
                        <label class="col-sm-3 control-label">客户电话</label>
                        <div class="col-sm-9">
                             {{this.remindExamineVal.phone}}
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">带看项目</label>
                        <div class="col-sm-9">
                             {{this.remindExamineVal.project}}
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">带看时间</label>
                        <div class="col-sm-9">
                            <DatePicker type="date"  format="yyyy-MM-dd hh:mm:ss"  v-model="remindExamineVal.time"></DatePicker>
                        </div>
                    </div>
                    <div class="form-group" v-if="remindExamineVal.list && remindExamineVal.list.length > 0">
                        <label class="col-sm-3 control-label">接待置业顾问</label>
                        <div class="col-sm-9">
                            <select class="form-control" v-model="consultant" style="width:168px">
                                <option value="">请选择</option>
								<option v-for="(item,index) in remindExamineVal.list" v-bind:value="item.adviserUuid" :key="index">
                                    {{ item.name }}
                                </option> 
							</select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">带看描述</label>
                        <div class="col-sm-9">
                            <textarea v-model="takeLookDescription" style="width: 300px;height: 66px;padding:4px"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">上传图片</label>
                        <div class="col-sm-9">
                            <ul class="clearfix remindUpload">
                                <li class="col-sm-4 file-image" v-for="(image,index) in imgesList" :key="index">
                                    <img  :src="image.url" width="100%" height="80px" 
                                        v-if="image.fileType.toLowerCase()=='png'
                                         || image.fileType.toLowerCase()=='jpg' 
                                         || image.fileType.toLowerCase()=='jpeg' 
                                         || image.fileType.toLowerCase()=='gif'"/>
                                    <div width="100%" height="80px" class="pic-bg-fj" v-else></div>
                                </li>
                                <li class="col-sm-4 file-image" >
                                    <div class="file-upload">
                                        <input ref="imageUpload" type="file" class="file-btn" style="width:100%;" name="files" id="files" @change="onFileChange" >
                                        <i class="layui-icon"></i>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                 </div>
                <div class="modal-footer">
                    <button type="button" class="btn checkedBtn"  @click="save">确定</button>
                    <button type="button" class="btn btn-default" @click="canel">取消</button>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
    .file-upload{width: 100px;height: 100px;position: relative;padding: 30px;border: 1px dashed #e2e2e2;background-color: #fff;text-align: center;cursor: pointer;color: #999;display: inline-block;position: relative}
    .file-upload:hover{border: 1px dashed #f87142;}
    .file-btn{position: absolute;width: 100%;height: 100%;top: 0;left: 0;outline: none;background-color: transparent;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity: 0;cursor: pointer;    z-index: 100;}
    .file-upload .layui-icon {font-size: 60px;color: #f87142;top: 6px;position: absolute;left: 20px;z-index: 10;}
    .file-image{margin: 5px 0;}
	.remindUpload li{margin-top: 8px;}
    .remindUpload .file-upload{width: 100%;height: 80px;padding:10px;}

</style>
<script>
    import { formatDate } from '../../assets/js/date.js'
    export default {
        //接收父组件的绑定值
        props: ["remindExamineVal"],
        data(){
            return{
                consultant:'',
                takeLookDescription:'',
                imgesList:[],
                // arrList:[]
            }
        },
        methods:{
            save:function(){
                // if(this.verification()){
                    var body={};
                    body.params = {
                        adviser: this.consultant,
                        remark:this.takeLookDescription,
                        visitTime:formatDate(this.remindExamineVal.time,'yyyy-MM-dd hh:mm:ss'),
                        affixList:this.imgesList,
                        syncFlag: "0",
                        sendSms:"1",
                        customerPremisesId:this.remindExamineVal.id,
                        sendFollowMsg: true
                    };
                    var url = this.utilHelper.apiUrl+'/api/addFollow';
                    this.$http.post(url,body).then((response)=>{
                    	var resData = response.body;
                    	if(resData.result == "1"){
                            layer.msg("操作成功");
                            this.canel()
                    	}else{
                    		layer.msg("操作失败");
                    	}
                    },(response)=>{
                        layer.msg("操作失败");
                    });
                // }
            },
            canel:function(){
                $('#remindExamine').modal('hide');
                this.takeLookDescription="";
                this.consultant="";
                this.imgesList=[];
                this.arrList=[]; 
            },
            onFileChange:function (e) {
                layer.load(0, {shade: false}); //弹出加载层
                var files = e.target.files || e.dataTransfer.files;
                if (!files.length)
                    return;

                var size = files[0].size;
                if(size > 3145728){
                    layer.msg("图片大小不能超过3M");
                    layer.closeAll('loading'); //关闭加载层
                    return;
                }
                this.createImage(files[0]);
            },
            createImage(file) {
                var _self = this;
                var reader = new FileReader();
                reader.readAsDataURL(file);
                let indexNum = file.name.lastIndexOf(".")+1;
                reader.onload = e =>{
                     //上传附件
                    let msg=e.target.result;
                    layer.load(0, {
                        shade: false
                    }); //弹出加载层
                    var myForm = new FormData(); //创建formdata
                    var blobBin = _self.dataURLtoBlob(msg); //base64转换blob
                    myForm.append("blobObject", blobBin); //想formData添加blob数据
                    myForm.append("suffix", file.name.substr(file.name.lastIndexOf("."))); //添加文件后缀
                    var url = _self.utilHelper.apiUrl + '/api/uploadBase64ToQiNiu';
                    _self.$http.post(url, myForm).then((response) => {
                        
                        layer.closeAll('loading'); //关闭加载层
                        var data = response.body;
                        if(data.result == "1") {
                            _self.imgesList.push({url:data.resData.imgName,isQiNiu:true,fileType:file.name.substr(indexNum)})
                            // _self.arrList.push({url:data.resData.imgName,isQiNiu:true})
                        } else {
                            layer.msg("图片上传失败，请重试");
                        }
                    }, (response) => {
                        layer.msg(response);
                    });
                };
            },
            //将base64转换blob
			dataURLtoBlob(dataUrl) {
				var arr = dataUrl.split(','),
					mime = arr[0].match(/:(.*?);/)[1],
					bstr = atob(arr[1]),
					n = bstr.length,
					u8arr = new Uint8Array(n);
				while(n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new Blob([u8arr], {
					type: mime
				});
			},
        }
    }
</script>